const path = require("path");

/**
 * 增加 hljs 的 classname
 */
function wrapCustomClass(render) {
  return function (...args) {
    return render(...args)
      .replace('<code class="', '<code class="hljs ')
      .replace("<code>", '<code class="hljs">');
  };
}

module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: "examples/main.js", // 入口
      template: "public/index.html", // 模板
      filename: "index.html", // 输出文件
    },
  },
  // 扩展 webpack 配置
  chainWebpack: (config) => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set("@", path.resolve("examples"))
      .set("~", path.resolve("packages"));
    // 把 packages 和 examples 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule("js")
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap((options) => {
        // 修改它的选项...
        return options;
      });
    config.module
      .rule("md")
      .test(/\.md/)
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("vue-markdown-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .options({
        raw: true,
        preventExtract: true, // 这个加载器将自动从html令牌内容中提取脚本和样式标签
        // 定义处理规则
        preprocess: (MarkdownIt, source) => {
          MarkdownIt.renderer.rules.table_open = function () {
            return '<table class="table">';
          };

          MarkdownIt.renderer.rules.fence = wrapCustomClass(
            MarkdownIt.renderer.rules.fence
          );

          // ```code`` 给这种样式加个class code_inline
          const code_inline = MarkdownIt.renderer.rules.code_inline;
          MarkdownIt.renderer.rules.code_inline = function (...args) {
            args[0][args[1]].attrJoin("class", "code_inline");
            return code_inline(...args);
          };
          return source;
        },
        use: [
          // :::demo ****
          [
            require("markdown-it-container"),
            "demo",
            {
              validate: function (params) {
                return params.trim().match(/^demo\s*(.*)$/);
              },

              render: function (tokens, idx) {
                if (tokens[idx].nesting === 1) {
                  return `<demo-block>
                                <div slot="highlight">`;
                }
                return "</div></demo-block>\n";
              },
            },
          ],
          [require("markdown-it-container"), "tip"],
          [require("markdown-it-container"), "warning"],
        ],
      });
  },
};
